<template>
  <Modal
      :value="show" transfer
      :title="title"
      :draggable="true"
      :closable="true"
      :width="width"
      :z-index="99"
      @on-ok="$emit('ok')"
      @on-cancel="$emit('cancel')">
    <div class="address-outline">
      <span style="margin-right:10px;">{{language.location}}:</span>
      <Breadcrumb>
        <BreadcrumbItem v-for="(item,i) in address" :key="item">{{item}}<Icon v-if="i==address.length-1&&i!=0" type="md-close" @click="$emit('closeLink',item)"></Icon></BreadcrumbItem>
      </Breadcrumb>
    </div>
    <div class="body-content">
      <Row :gutter="8">
        <Col :span="menuRate">
          <slot name="menu"></slot>
        </Col>
        <Col :span="24-menuRate" style="padding:10px;">
          <slot></slot>
        </Col>
      </Row>

    </div>
  </Modal>
</template>

<script>
export default {
  name: "cfg-wizard-panel",
  data(){
    return {

    }
  },
  props:{
    show:{
      default:()=>{
        return false;
      }
    },
    title:{
      default:()=>{
        return '';
      }
    },
    width:{
      default:()=>{
        return 800;
      }
    },
    menuRate:{
      default:()=>{
        return 6;
      }
    },
    address:{
      default:()=>{
        return [];
      }
    },
  },
  computed:{
    language(){
      return {
        "en-US": {
          location:'location',
        },
        "zh-CN": {
          location:'位置',
        },
      }[this.G_Locale];
    }
  },
  methods:{

  }
}
</script>

<style scoped lang="scss">
  .address-outline {
    display: flex;
    padding:2px 5px;
    margin-top: -10px;
    border-bottom: 1px solid #e8eaec;
  }
  .body-content {
    padding: 2px;
  }
</style>